import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { deleteTodo, toggleTodo, editTodo } from '../actions'
//Presentational Components
//This doesn’t mean that presentational components have to be functions—it’s just easier to define them this way.
const Todo = React.createClass({
    getInitialState() {
		return {
		    canEdit: false,
			text: this.props.text,
		}
	},
	render() {
		let	{completed, id,dispatch} = this.props,
			text = this.state.text;
		return (
		    this.state.canEdit ? 
		    <input type="text" className="new-todo edit" value={text} onChange={this.onChange}
			    onBlur={() => this.onBlur(id, text)}/> :
			<li
				style={{
					textDecoration: completed ? 'line-through' : 'none'
				}}
			>
				<div className="view">
					<input className="toggle"
							 type="checkbox"
							 checked={completed}
							 onChange={() => dispatch(toggleTodo(id))} 
							 />
					<label onDoubleClick={this.doubleClick}>{text}</label>
					<button className="destroy" onClick={() => dispatch(deleteTodo(id))}/>
				</div>
			</li>
		)
	},
	doubleClick() {
		this.setState({canEdit: true})
	},
	onChange(e) {
	    this.setState({text: e.target.value})
	}, 
	onBlur(id, text) {
	   this.setState({canEdit: false});
	   this.props.dispatch(editTodo(id, text));
	}
})  

export default connect()(Todo)
